<template>
    <ul class="menu-a">
        <li v-for="(item, idx) in dataMenu" :key="idx" class="menu-item">
            <a class="menu-link" href="item.url">
                {{ item.title }}
            </a>
            <span v-if="idx !== dataMenu.length-1" class="separator">
                {{separator}}
            </span>
        </li>
    </ul>
</template>

<script>
const exampleData = [
    {
        'title': '小米商城',
        'url': '/'
    },
    {
        'title': 'MIUI',
        'url': '/'
    }
]
export default {
    props: {
        dataMenu: {
            type: Array,
            default: function () {
                return exampleData
            }
        }
    },
    data: function () {
        return {
            comSetIsShowSeparator: true
        }
    },
    computed: {
        separator: function () {
            return this.comSetIsShowSeparator ? '|' : ''
        }
    }
}
</script>

<style lang="stylus" scoped>
@import "~assets/Mytools/myAtomCss/settings/color-set.styl"
comSetTextFontSize = 12px
comSetTextLineHeight = 40px
comSetTextFontColor = color6
comSetTextFontHoverColor = color11
comSetSeparatorFontSize = inherit
comSetSeparatorFontColor = color3
comSetSeparatorWidth = 17px
.menu-a
    flex 1
    margin 0
    padding 0
    list-style none
    display flex
    .menu-item
        font-size 0
        .menu-link
            color comSetTextFontColor
            font-size comSetTextFontSize
            line-height comSetTextLineHeight
        .menu-link:hover
            color comSetTextFontHoverColor
        .separator
            font-size comSetTextFontSize
            line-height comSetTextLineHeight
            color comSetSeparatorFontColor
            display inline-block
            width comSetSeparatorWidth
            text-align center
</style>